<template>
  <div>
    <div class="top">
      <el-button type="primary" style="margin: 12px;padding:9px">
        <router-link :to="{path:'/demopages'}">
          <i class="el-icon-circle-plus">新增产品</i>
        </router-link>
      </el-button>
      <!--          下拉选项-->
      <!--为el-select添加filterable属性即可启用搜索功能。
      默认情况下，Select 会找出所有label属性包含输入值的选项。
      如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。
      filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值-->
      <el-select v-model="value" filterable placeholder="汽车品牌" class="select">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      &nbsp;&nbsp;  | &nbsp;&nbsp;
      搜索：<el-input placeholder="汽车型号" suffix-icon="el-icon-search" style="width: 160px"></el-input>
    </div>
    <div class="tab">

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="日期"
          width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>


      <el-button @click="xtpl">kpl</el-button>
      <el-popover placement="right" width="400" trigger="click">
        <el-checkbox-group v-model="colOptions">
          <el-checkbox v-for="item in colSelect" :label="item" :key="item" ></el-checkbox>
        </el-checkbox-group>
        <el-button slot="reference">设置</el-button>
      </el-popover>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400" style="margin: 0 0 0 50%">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'SaContractPage',
    data(){
      return{
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],


        value:'',
        options:[],
        productList:[],//产品信息
        input:'',
        colData: [{title: "名称",istrue: true},
          {title: "型号",istrue: true},],
        colOptions: [], //默认全选
        colSelect: [],
        tableData3: [{
          ID:'188',
          name:'赵威',
          userinfo:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          orderid:'2019114112345',
          total:'500000',
          reamount:'15000',
          contractstate:'执行中',
          username:'陈默',
          starttime:'2019-1-14'
        }],
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      }
    },
    created:function(){
      this.initData();
      var _this = this;
      for (let i = 0; i < _this.colData.length; i++) {
        _this.colSelect.push(_this.colData[i].title);
        /*if (_this.colData[i].title == '名称') { //初始化不想展示的列可以放在这个条件里
          continue;
        }*/
        _this.colOptions.push(_this.colData[i].title);

      }
    },
    methods:{
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      xtpl(){
        this.$message("xx"+this.multipleSelection);
      },
      initData(){
        this.$axios("http://localhost:8088/product_info").then(v=>{
          this.productList=v.data;
        }).catch()
      },

      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },

    watch: {
      colOptions(valArr) {
        var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
        this.colData.filter(i => {
          if (arr.indexOf(i.title) != -1) {
            i.istrue = false;
            this.$nextTick(() => {
              this.$refs.multipleTable.doLayout();
            });
          } else {
            i.istrue = true;
            this.$nextTick(() => {
              this.$refs.multipleTable.doLayout();
            });
          }
        });
      }
    }
  }
</script>

<style scoped>
  .top{
    border: 1px solid #D3DCE6;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    background: white
  }
  .select{
    padding:10px;
    width: 150px;
    margin-left: 460px;
  }


  .tab{
    background: white;
  }

  .page{
    padding: 15px 0 15px 0;
  }
  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }

</style>
